<template>
  <JVxeTable
    ref="editableTable"
    toolbar
    row-number
    row-selection
    keep-source
    dragSort
    :loading="loading"
    :dataSource="dataSource"
    :columns="columns"
  />
</template>
<script lang="ts">
  import { defineComponent, computed, unref } from 'vue';
  import { JVxeTypes, JVxeColumn } from '/@/components/jeecg/JVxeTable/types';

  export default defineComponent({
    name: 'GraphreportQueryConfig',
    props: {
      dataSource: {
        type: Array,
        default: () => [],
      },
    },
    setup(props) {
      const editableTable = ref();
      const loading = ref(false);

      const columns: JVxeColumn[] = [
        {
          title: '字段名',
          key: 'field',
          type: JVxeTypes.input,
          width: '120px',
          placeholder: '请输入${title}',
          defaultValue: '',
          validateRules: [{ required: true, message: '${title}不能为空' }],
        },
        {
          title: '字段文本',
          key: 'label',
          type: JVxeTypes.input,
          width: '120px',
          placeholder: '请输入${title}',
          defaultValue: '',
          validateRules: [{ required: true, message: '${title}不能为空' }],
        },
        {
          title: '控件类型',
          key: 'viewType',
          type: JVxeTypes.select,
          minWidth: '150px',
          placeholder: '请选择${title}',
          options: [
            { title: '文本框', value: 'text' },
            { title: '日期(yyyy-MM-dd)', value: 'date' },
            { title: '日期（yyyy-MM-dd HH:mm:ss）', value: 'datetime' },
            { title: '下拉框', value: 'list' },
            { title: '下拉多选框', value: 'list_multi' },
            { title: '下拉搜索框', value: 'sel_search' },
            { title: '分类字典树', value: 'cat_tree' },
            { title: 'Popup弹框', value: 'popup' },
            { title: '部门选择', value: 'sel_depart' },
            { title: '用户选择', value: 'sel_user' },
            { title: '省市区组件', value: 'pca' },
            { title: '自定义树控件', value: 'sel_tree' },
          ],
          defaultValue: 'single',
          validateRules: [{ required: true, message: '${title}不能为空' }],
        },
        {
          title: '查询类型',
          key: 'mode',
          type: JVxeTypes.select,
          width: '110px',
          placeholder: '请选择${title}',
          options: [
            { title: '普通查询', value: 'single' },
            { title: '范围查询', value: 'group' },
          ],
          defaultValue: 'single',
          validateRules: [{ required: true, message: '${title}不能为空' }],
        },
        {
          title: '字典Table',
          key: 'dictTable',
          type: JVxeTypes.input,
          width: '120px',
          placeholder: '请输入${title}',
          defaultValue: '',
        },
        {
          title: '字典Code',
          key: 'dictCode',
          type: JVxeTypes.input,
          width: '120px',
          placeholder: '请输入${title}',
          defaultValue: '',
        },
        {
          title: '字典Text',
          key: 'dictText',
          type: JVxeTypes.input,
          width: '120px',
          placeholder: '请输入${title}',
          defaultValue: '',
        },
        {
          title: '默认值',
          key: 'defValue',
          type: JVxeTypes.input,
          width: '120px',
          placeholder: '请输入${title}',
          defaultValue: '',
        },
        {
          title: '是否启用',
          key: 'config',
          minWidth: '80px',
          align: 'center',
          type: JVxeTypes.checkbox,
          customValue: [1, 0],
          defaultChecked: true,
        },
      ];

      function getValuesSync() {
        return editableTable.getValuesSync({
          validate: true,
        });
      }

      return { columns, getValuesSync };
    },
  });
</script>
